<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<style type="text/css">
			nav{
				height: 55px;
				width: 700px;
				background: #69c;
				
			}
			ul{
				list-style: none;
			}
			li{
				float: left;
				margin-left: 50px;
				height: 50px;
				line-height: 50px;
			}
			a{
				color: white;
				text-decoration: none;
				display: block;
				padding: 5px 30px;
				margin: 5px;
				height: 30px;
				line-height: 30px;
			}
			a:hover{
				color: black;
				border: 2px solid #fff;
				background: #6CF;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="">首页</a></li>
				<li><a href="">案例展示</a></li>
				<li><a href="">最新文章</a></li>
			</ul>
		</nav>
	</body>
</html>
